<template>
  <main class="main-container" v-loading="comeGroupStore.isLoading">
    <div class="search-container">
      <div style="display: flex">
        <el-text>保养项目名称：</el-text>
        <div style="margin-left: 10px">
          <el-select
            v-model="comeGroupStore.currentProjectName"
            filterable
            clearable
            style="width: 240px"
            placeholder="请选择要检索的项目"
          >
            <el-option
              v-for="item in comeGroupStore.projectNames"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="content-container">
      <div v-if="comeGroupStore.hasComeGroup" style="width: 50%">
        <div>
          <el-text>Agent Id：</el-text>
          <el-input
            readonly
            v-model="comeGroupStore.currentComeGroup.agentId"
            style="margin-top: 4px"
            maxlength="20"
            type="text"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          <el-text>Template Id：</el-text>
          <el-input
            readonly
            v-model="comeGroupStore.currentComeGroup.templateId"
            style="margin-top: 4px"
            maxlength="20"
            type="text"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          <el-text>Access Token：</el-text>
          <el-input
            readonly
            v-model="comeGroupStore.currentComeGroup.accessToken"
            style="margin-top: 4px"
            maxlength="20"
            type="text"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          <el-text>Secret：</el-text>
          <el-input
            readonly
            v-model="comeGroupStore.currentComeGroup.secret"
            style="margin-top: 4px"
            maxlength="20"
            type="text"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          <el-text>User Type：</el-text>
          <el-input
            readonly
            v-model="comeGroupStore.currentComeGroup.userType"
            style="margin-top: 4px"
            maxlength="20"
            type="text"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          <el-text>Enable：</el-text>
          <el-input
            readonly
            v-model="comeGroupStore.currentComeGroup.enable"
            style="margin-top: 4px"
            maxlength="20"
            type="text"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          <el-text>Creator Id：</el-text>
          <el-input
            readonly
            v-model="comeGroupStore.currentComeGroup.creatorId"
            style="margin-top: 4px"
            maxlength="20"
            type="text"
          ></el-input>
        </div>
        <div style="margin-top: 10px">
          <el-text>Creation Time：</el-text>
          <el-input
            readonly
            v-model="comeGroupStore.currentComeGroup.creationTime"
            style="margin-top: 4px"
            maxlength="20"
            type="text"
          ></el-input>
        </div>
        <div style="margin-top: 20px; width: 100%; display: flex; justify-content: center">
          <el-button type="warning" @click="comeGroupStore.deleteComeGroupAsync()">删除</el-button>
        </div>
      </div>
      <div
        v-else
        style="display: flex; flex-direction: column; align-items: center; justify-content: center"
      >
        <template v-if="!comeGroupStore.hasComeGroup && comeGroupStore.comeGroupIsSearched">
          <span>该项目未设置 COME 群组</span>
          <el-button type="primary" style="margin-top: 20px" @click="showAddItemDialog = true"
            >设置</el-button
          >
        </template>
        <div v-else>
          <span>请先选择项目</span>
        </div>
      </div>
    </div>
    <el-dialog
      v-model="showAddItemDialog"
      title="设置 COME 群组"
      width="400"
      :close-on-click-modal="false"
      draggable
    >
      <div>
        <el-text>Agent Id：</el-text>
        <el-input v-model="agentId" style="margin-top: 4px" maxlength="20" type="text"></el-input>
      </div>
      <div style="margin-top: 10px">
        <el-text>Template Id：</el-text>
        <el-input
          v-model="templateId"
          style="margin-top: 4px"
          maxlength="20"
          type="text"
        ></el-input>
      </div>
      <div style="margin-top: 10px">
        <el-text>Access Token：</el-text>
        <el-input
          v-model="accessToken"
          style="margin-top: 4px"
          maxlength="20"
          type="text"
        ></el-input>
      </div>
      <div style="margin-top: 10px">
        <el-text>Secret：</el-text>
        <el-input v-model="secret" style="margin-top: 4px" maxlength="20" type="text"></el-input>
      </div>
      <div style="margin-top: 10px">
        <el-text>User Type：</el-text>
        <el-input v-model="userType" style="margin-top: 4px" maxlength="20" type="text"></el-input>
      </div>
      <div style="margin-top: 10px; width: 100%; display: flex; justify-content: space-between">
        <el-text>Enable：</el-text>
        <el-switch v-model="enable"></el-switch>
      </div>
      <div
        style="
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 20px;
        "
      >
        <el-button type="primary" @click="onSave">保存</el-button>
      </div>
    </el-dialog>
  </main>
</template>

<script setup lang="ts">
import { Search, Refresh } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { useDeviceMaintenancePartStore } from '@/stores/device-maintenance/part'
import { ElMessage } from 'element-plus'
import type { Part } from '@/types/system/device-maintenance/part'
import { useDeviceMaintenanceComeGroupStore } from '@/stores/device-maintenance/come-group'
import { ComeGroup } from '@/types/system/device-maintenance/come-group'

const showAddItemDialog = ref(false)
const agentId = ref('')
const templateId = ref('')
const accessToken = ref('')
const secret = ref('')
const userType = ref('ding')
const enable = ref(true)

const comeGroupStore = useDeviceMaintenanceComeGroupStore()
if (!comeGroupStore.isLoadComeGroup) {
  comeGroupStore.updateComeGroupAsync()
}

async function onSave() {
  showAddItemDialog.value = false
  const comeGroup = new ComeGroup()
  comeGroup.agentId = agentId.value
  comeGroup.templateId = templateId.value
  comeGroup.accessToken = accessToken.value
  comeGroup.secret = secret.value
  comeGroup.userType = userType.value
  comeGroup.enable = enable.value
  comeGroupStore.insertComeGroupAsync(comeGroup)
}
</script>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.content-container {
  padding: 30px 30px 20px;
  margin-top: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  height: 100%;
}

.search-container {
  padding: 30px 30px 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
</style>
